<template>
	<view class="header-container">
		<!-- 提取公共属性，并使用计算属性简化判断条件 -->				
		<u-navbar v-if="hasMutipleFunctions || hasGoHome" :bgColor="bgColor" :title="centerTitle" :titleStyle="titleStyle"  placeholder>
			<view slot="left" class="left-nav">
				<u-icon v-if="hasMutipleFunctions" name="arrow-left" size="20px" :color="leftIconColor"
					@click="goBack()" style="margin-right: 5px;"></u-icon>
				<u-icon name="home" size="20px" :color="leftIconColor" @click="goHome()"></u-icon>
			</view>
		</u-navbar>
		
		<u-navbar v-else :leftText="leftText" :leftIcon="leftIcon" :bgColor="bgColor" :leftIconColor="leftIconColor"
			:title="centerTitle" :titleStyle="titleStyle" :autoBack="hasAutoBack" placeholder>	
		</u-navbar>
	</view>
</template>

<script>
	export default {
		name: "Header",
		props: {
			// 文本在左侧，并且背景为主题色（不具备autoBack返回上一页功能）
			leftTitlePrimary: {
				type: String,
				default: ''
			},
			// 文本居中，背景为主题色（拥有返回上一页功能）
			centerTitlePrimary: {
				type: String,
				default: ''
			},
			// 文本居中，背景色为白色（拥有返回上一页功能）
			centerTitleWhite: {
				type: String,
				default: ''
			},
			// 文本居中，背景为主题色（拥有返回主页面的功能）
			centerTitlePrimaryHome: {
				type: String,
				default: ''
			},
			// 文本居中，背景为白色（拥有返回主页面的功能）
			centerTitleWhiteHome: {
				type: String,
				default: ''
			},
			// 文本居中，背景为主题色（拥有多个功能：返回上一页和返回主页）
			centerTitlePrimaryMany: {
				type: String,
				default: ''
			},
			// 文本居中，背景为白色（拥有多个功能：返回上一页和返回主页）
			centerTitleWhiteMany: {
				type: String,
				default: ''
			},
		},
		computed: {
			/* 设置背景颜色 */
			bgColor() {
				return this.leftTitlePrimary || this.centerTitlePrimary || this.centerTitlePrimaryHome || this
					.centerTitlePrimaryMany ? '#2979ff' : '#ffffff'
			},
			/* 是否需要展示左侧文字？*/
			leftText() {
				return this.leftTitlePrimary ? this.leftTitlePrimary : ' ' // 注意！！这里的' '中间是有空格的，意思是不需要
			},
			/* 是否需要展示左侧图标？*/
			leftIcon() {
				return this.centerTitlePrimary || this.centerTitleWhite ? 'arrow-left' : ' ' // 注意！！这里的' '中间是有空格的，意思是不需要
			},
			/* 根据背景，设置左侧内容的颜色 */
			leftIconColor() {
				if (this.bgColor === '#ffffff') {
					return '' // 这里的''中间可没有空格，是使用内置默认值的意思
				} else {
					return '#ffffff'
				}
				return ''
			},
			/* 是否需要展示居中的文字？*/
			centerTitle() {
				return this.centerTitlePrimary || this.centerTitleWhite || this.centerTitlePrimaryHome || this
					.centerTitleWhiteHome || this.centerTitlePrimaryMany || this.centerTitleWhiteMany || ''
			},
			/* 是否需要使用内置的返回上一页功能？ */
			hasAutoBack() {
				return Boolean(this.centerTitlePrimary || this.centerTitleWhite)
			},
			/* 是否只需要返回主页功能？*/
			hasGoHome() {
				return Boolean(this.centerTitlePrimaryHome || this.centerTitleWhiteHome)
			},
			/* 根据背景，设置居中文字的颜色样式 */
			titleStyle() {
				return this.centerTitlePrimary || this.centerTitlePrimaryHome || this.centerTitlePrimaryMany ?
					'color: #ffffff' : ''
			},
			/* 是否具有多个功能？ */
			hasMutipleFunctions() {
				return Boolean(this.centerTitlePrimaryMany || this.centerTitleWhiteMany)
			},
		},
		methods: {
			goHome() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.header-container {
		.left-nav {
			display: flex;
			align-items: center;
		}
	}
</style>